import { LikeOutlined, UserOutlined } from "@ant-design/icons";
import { Button, List, Modal, Tooltip } from "antd";
import { Avatar, Descriptions, Result, Space, Statistic } from "antd";
import dayjs from "dayjs";
import moment from "moment";
/*
 * @Descripttion: 任务组页面
 * @Author: 毕怀智
 * @Date: 2021-11-24 21:03:13
 * @Function: use of this file
 */
import React from "react";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

import { useDeleteEpic, useEpics } from "api/Epic";
import { useTasks } from "api/Task";
import { Container, Row } from "components";
import { useProjectInUrl } from "pages/projectBoard/utils";
import { Epic } from "types/Epic";

import { CreateEpic } from "./components/CreateEpic";
import { useEpicSearchParams, useEpicsQueryKey } from "./utils";

import type { ProSettings } from "@ant-design/pro-layout";
import ProLayout, {
  PageContainer,
  SettingDrawer,
} from "@ant-design/pro-layout";
import styled from "@emotion/styled";
import { useAuth } from "context/AuthContext";
import Tables from "./tables";

const TaskGroup = () => {
  const { data: currentProject } = useProjectInUrl();
  const { data: epics } = useEpics(useEpicSearchParams());
  // 对应项目组的任务（从url中的id拿）
  const { data: tasks } = useTasks({ projectId: currentProject?.id });
  // 删除任务组
  const { mutate: deleteEpic } = useDeleteEpic(useEpicsQueryKey());
  const [epicCreateOpen, setEpicCreateOpen] = useState(false);

  const [settings, setSetting] = useState<Partial<ProSettings> | undefined>({
    fixSiderbar: true,
  });
  const [pathname, setPathname] = useState("/welcome");
  const [dataList, setDataList] = useState<any>();
  const confirmDeleteEpic = (epic: Epic) => {
    Modal.confirm({
      title: `确定删除项目组：${epic.name}`,
      // content: "点击确定删除",
      okText: "确定",
      cancelText: "取消",
      onOk() {
        deleteEpic({ id: epic.id });
      },
    });
  };

  useEffect(() => {
    setDataList(epics);
    console.log(tasks, "tasks");
    console.log(currentProject, "currentProject");
    console.log(epics, "epics");
  }, [epics]);
  const a = (task: any) => {
    if (task.processorId == null) {
      return "未选";
    }
    if (task.processorId == 1) {
      return "云谦";
    }
    if (task.processorId == 2) {
      return "熊天成";
    }
    if (task.processorId == 3) {
      return "郑华";
    }
    if (task.processorId == 4) {
      return "王文静";
    }
    if (task.processorId == 5) {
      return "张霖波";
    }
    if (task.processorId == 6) {
      return "高修文";
    }
  };

  const b = (task: any) => {
    if (task.typeId == 1) {
      return "task";
    }
    if (task.typeId == 2) {
      return "bug";
    }
  };
  const { logout, user } = useAuth();
  const content = (
    <Descriptions size="small" column={2}>
      <Descriptions.Item label="创建人">
        <strong>{dataList?.[dataList.length - 1]?.username}</strong>
      </Descriptions.Item>
      <Descriptions.Item label="联系方式">
        <a>{dataList?.[dataList.length - 1]?.iphone}</a>
      </Descriptions.Item>
      <Descriptions.Item label="创建时间">
        {dayjs(tasks?.[0]?.created).format("YYYY-MM-DD")}
      </Descriptions.Item>
      <Descriptions.Item label="更新时间">
        {dayjs(tasks?.[tasks.length - 1]?.created).format("YYYY-MM-DD")}
      </Descriptions.Item>
      <Descriptions.Item label="备注">
        {dataList?.[dataList.length - 1]?.noice}
      </Descriptions.Item>
    </Descriptions>
  );

  return (
    <Container>
      <Row>
        <h2>{currentProject?.name}任务组</h2>
        <Button onClick={() => setEpicCreateOpen(true)} type={"link"}>
          创建任务组
        </Button>
      </Row>

      <PageContainer
        content={content}
        extraContent={
          <Space size={24}>
            <Statistic
              title="Feedback"
              value={1128}
              prefix={<LikeOutlined />}
            />
            <Statistic title="Unmerged" value={93} suffix="/ 100" />
          </Space>
        }
      ></PageContainer>

      <List
        // style={{ overflow: "scroll" }}
        dataSource={epics}
        itemLayout={"vertical"}
        renderItem={(epic) => (
          <List.Item>
            <List.Item.Meta
              title={
                <Row>
                  <span>{epic.name}</span>
                  <Button onClick={() => confirmDeleteEpic(epic)} type={"link"}>
                    删除
                  </Button>
                </Row>
              }
              description={<div></div>}
            />
            <div>
              {/* {tasks
                ?.filter((task) => task.projectId === epic.projectId)
                .map((task) => (
                  // <>
                  //   任务名：
                  //   <Link
                  //     style={{ width: 200 }}
                  //     to={`/projects/${currentProject?.id}/kanban?editingTaskId=${task.id}`}
                  //     key={task.id}
                  //   >
                  //     {task.name}
                  //   </Link>
                  //   &nbsp;&nbsp;&nbsp;&nbsp;
                  //   <span>经办人：{a(task)}</span> &nbsp;&nbsp;&nbsp;&nbsp;
                  //   <span>类型：{b(task)}</span>
                  //   <br />{" "}
                  // </>
                  
                ))} */}
              <Tables />
            </div>
          </List.Item>
        )}
      />
      <CreateEpic
        onClose={() => setEpicCreateOpen(false)}
        visible={epicCreateOpen}
      />
    </Container>
  );
};

export default TaskGroup;
